<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="shortcut icon"
      type="image/png"
      href="/images/favicon-32x32.png"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Alata&family=Poppins:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <title>Shortly</title>
  </head>
  <body>
    <!-- 导航栏容器 -->
    <nav class="relative container mx-auto p-6">
      <!-- 所有项目的弹性容器 -->
      <div class="flex items-center justify-between">
        <!-- logo/菜单的弹性容器 -->
        <div class="flex items-center space-x-20">
          <!-- logo -->
          <img src="/images/logo.svg" alt="" />
          <!-- 左侧菜单 -->
          <div class="hidden space-x-8 font-bold lg:flex">
            <a href="" class="text-grayishViolet hover:text-veryDarkViolet"
              >功能</a
            >
            <a href="" class="text-grayishViolet hover:text-veryDarkViolet"
              >价格</a
            >
            <a href="" class="text-grayishViolet hover:text-veryDarkViolet"
              >资源</a
            >
          </div>
        </div>
        <!-- 右侧按钮菜单 -->
        <div
          class="hidden items-center space-x-6 font-bold text-grayishViolet lg:flex"
        >
          <div class="hover:text-veryDarkViolet">登录</div>
          <a
            href=""
            class="px-8 py-3 font-bold text-white bg-cyan rounded-full hover:opacity-70"
            >注册</a
          >
        </div>
        <!-- 汉堡菜单按钮 -->
        <button
          id="menu-btn"
          class="block hamburger lg:hidden foucs:outline-none"
          type="button"
        >
          <span class="hamburger-top"></span>
          <span class="hamburger-middle"></span>
          <span class="hamburger-bottom"></span>
        </button>
      </div>
      <!-- 移动端菜单 -->
      <div
        id="menu"
        class="absolute hidden p-6 rounded-lg bg-darkViolet left-6 right-6 top-20 z-50"
      >
        <div
          class="flex flex-col items-center justify-center w-full space-y-6 font-bold text-white rounded-sm"
        >
          <a href="" class="w-full text-center">功能</a>
          <a href="" class="w-full text-center">价格</a>
          <a href="" class="w-full text-center">资源</a>
          <a href="" class="w-full text-center pt-6 border-t border-gray-400"
            >登录</a
          >
          <a href="" class="w-full text-center py-3 rounded-full bg-cyan"
            >注册</a
          >
        </div>
      </div>
    </nav>

    <!-- hero -->
    <section id="hero">
      <!-- 容器 -->
      <div class="container flex flex-col-reverse mx-auto p-6 lg:flex-row">
        <!-- 内容容器 -->
        <div class="flex flex-col space-y-10 mb-44 lg:mt-16 lg:w-1/2 xl:mb-52">
          <h1
            class="text-5xl font-bold text-center lg:text-6xl lg:max-w-md lg:text-left"
          >
            不仅仅是较短的链接
          </h1>
          <p
            class="text-2xl text-center text-gray-400 lg:max-w-md lg:text-left"
          >
            建立您的品牌认知度并详细了解您的链接效果。
          </p>
          <div class="mx-auto lg:mx-0">
            <a
              href=""
              class="py-5 px-10 text-2xl font-bold text-white bg-cyan rounded-full lg:py-4 hover:opacity-70"
              >开始</a
            >
          </div>
        </div>
        <!-- 图像 -->
        <div class="mb-24 mx-auto md:w-180 lg:mb-0 lg:w-1/2">
          <img src="/images/illustration-working.svg" alt="" />
        </div>
      </div>
    </section>

    <!-- shorten -->
    <section id="shorten" class="relative bg-gray-100">
      <!-- 容器 -->
      <div class="max-w-4xl mx-auto p-6 space-y-6">
        <!-- 表单 -->
        <form
          id="link-form"
          class="relative flex flex-col w-full p-10 -mt-20 space-y-4 bg-darkViolet rounded-lg md:flex-row md:space-y-0 md:space-x-3"
        >
          <input
            id="link-input"
            type="text"
            class="flex-1 p-3 border-2 rounded-lg placeholder-yellow-500 focus:outline-none"
            placeholder="输入你要缩短的网址"
            autocomplete="off"
          />
          <button
            class="px-10 py-3 text-white bg-cyan rounded-lg hover:bg-cyanLight focus:outline-none md:py-2"
          >
            缩短它！
          </button>
          <!-- 错误信息 -->
          <div
            id="err-msg"
            class="absolute left-7 bottom-3 text-red text-sm italic"
          ></div>
        </form>
        <!-- 网址1 -->
        <div
          class="flex flex-col items-center justify-between w-full p-6 bg-white rounded-lg md:flex-row"
        >
          <p class="font-bold text-center text-veryDarkViolet md:text-left">
            https://codeberg.org/cao/tailwind-course
          </p>
          <div
            class="flex flex-col items-center justify-end flex-1 space-x-4 space-y-2 md:flex-row md:space-y-0"
          >
            <div class="font-bold text-cyan">https://foo.bar/i4Ik3d</div>
            <button
              class="p-2 px-8 text-white bg-cyan rounded-lg hover:opacity-70 focus:outline-none"
            >
              复制
            </button>
          </div>
        </div>
        <!-- 网址2 -->
        <div
          class="flex flex-col items-center justify-between w-full p-6 bg-white rounded-lg md:flex-row"
        >
          <p class="font-bold text-center text-veryDarkViolet md:text-left">
            https://notabug.org/cao/tailwind-course
          </p>
          <div
            class="flex flex-col items-center justify-end flex-1 space-x-4 space-y-2 md:flex-row md:space-y-0"
          >
            <div class="font-bold text-cyan">https://foo.bar/Et4j6a</div>
            <button
              class="p-2 px-8 text-white bg-darkViolet rounded-lg hover:opacity-70 focus:outline-none"
            >
              复制
            </button>
          </div>
        </div>
        <!-- 网址3 -->
        <div
          class="flex flex-col items-center justify-between w-full p-6 bg-white rounded-lg md:flex-row"
        >
          <p class="font-bold text-center text-veryDarkViolet md:text-left">
            https://git.sr.ht/~cao/tailwind-course
          </p>
          <div
            class="flex flex-col items-center justify-end flex-1 space-x-4 space-y-2 md:flex-row md:space-y-0"
          >
            <div class="font-bold text-cyan">https://foo.bar/57FdeA</div>
            <button
              class="p-2 px-8 text-white bg-cyan rounded-lg hover:opacity-70 focus:outline-none"
            >
              复制
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- stats -->
    <section id="stats" class="py-24 bg-gray-100">
      <div class="container mx-auto px-3">
        <h2 class="text-4xl mb-6 font-bold text-center">高级统计</h2>
        <p class="max-w-xs mx-auto text-center text-gray-400 md:max-w-md">
          使用我们的高级统计仪表板跟踪您的链接在网络上的表现。
        </p>
      </div>
    </section>

    <!-- feature -->
    <section id="feature" class="pb-32 bg-gray-100">
      <div
        class="relative container flex flex-col items-start px-6 mx-auto md:flex-row md:space-x-7"
      >
        <!-- 水平线 -->
        <div
          class="hidden absolute top-24 left-16 h-3 w-10/12 bg-cyan md:block"
        ></div>
        <!-- 垂直线 -->
        <div class="absolute w-2 left-1/2 h-full -ml-1 bg-cyan md:hidden"></div>
        <!-- 盒子1 -->
        <div
          class="relative flex flex-col p-6 space-y-6 bg-white rounded-lg md:w-1/3"
        >
          <!-- 图片定位 -->
          <div class="absolute -ml-10 left-1/2 -top-10 md:left-16">
            <!-- 背景及中心图片容器 -->
            <div
              class="flex items-center justify-center w-20 h-20 p-4 rounded-full bg-veryDarkViolet"
            >
              <img src="/images/icon-brand-recognition.svg" alt="" />
            </div>
          </div>
          <h5
            class="pt-6 text-xl font-bold text-center capitalize md:text-left"
          >
            品牌认知度
          </h5>
          <p class="text-center text-gray-400 md:text-left">
            每次点击都能提升您的品牌认知度。 通用链接没有任何意义。
            品牌链接有助于增强您对内容的信心。
          </p>
        </div>
        <!-- 盒子2 -->
        <div
          class="relative flex flex-col mt-24 p-6 space-y-6 bg-white rounded-lg md:w-1/3 md:mt-8"
        >
          <!-- 图片定位 -->
          <div class="absolute -ml-10 left-1/2 -top-10 md:left-16">
            <!-- 背景及中心图片容器 -->
            <div
              class="flex items-center justify-center w-20 h-20 p-4 rounded-full bg-veryDarkViolet"
            >
              <img src="/images/icon-detailed-records.svg" alt="" />
            </div>
          </div>
          <h5
            class="pt-6 text-xl font-bold text-center capitalize md:text-left"
          >
            详细记录
          </h5>
          <p class="text-center text-gray-400 md:text-left">
            深入了解谁在点击您的链接。
            了解人们何时何地与您的内容互动有助于做出更好的决策。
          </p>
        </div>
        <!-- 盒子3 -->
        <div
          class="relative flex flex-col mt-24 p-6 space-y-6 bg-white rounded-lg md:w-1/3 md:mt-16"
        >
          <!-- 图片定位 -->
          <div class="absolute -ml-10 left-1/2 -top-10 md:left-16">
            <!-- 背景及中心图片容器 -->
            <div
              class="flex items-center justify-center w-20 h-20 p-4 rounded-full bg-veryDarkViolet"
            >
              <img src="/images/icon-fully-customizable.svg" alt="" />
            </div>
          </div>
          <h5
            class="pt-6 text-xl font-bold text-center capitalize md:text-left"
          >
            完全可定制
          </h5>
          <p class="text-center text-gray-400 md:text-left">
            通过可定制的链接提高品牌知名度和内容可发现性，增强受众参与度。
          </p>
        </div>
      </div>
    </section>

    <!-- CTA -->
    <section id="cta" class="py-24 bg-darkViolet">
      <div class="flex flex-col p-2 space-y-6">
        <h5
          class="mx-auto space-y-10 text-4xl font-bold text-center text-white"
        >
          马上增强你的链接
        </h5>
        <button
          class="px-10 py-5 mx-auto text-2xl font-bold text-white rounded-full bg-cyan hover:bg-cyanLight md:text-base md:py-3 focus:outline-none"
        >
          开始
        </button>
      </div>
    </section>

    <footer class="py-16 bg-veryDarkViolet">
      <div
        class="container flex flex-col items-center justify-between mx-auto space-y-16 md:flex-row md:space-y-0 md:items-start"
      >
        <!-- logo -->
        <img src="/images/logo.svg" alt="" />
        <!-- 菜单容器 -->
        <div
          class="flex flex-col space-y-16 md:space-x-20 md:flex-row md:space-y-0"
        >
          <!-- 菜单1 -->
          <div class="flex flex-col items-center w-full md:items-start">
            <div class="mb-5 font-bold text-white capitalize">功能</div>
            <div class="flex flex-col items-center space-y-3 md:items-start">
              <a href="" class="capitalize text-grayishViolet hover:text-cyan"
                >缩短链接</a
              >
              <a href="" class="capitalize text-grayishViolet hover:text-cyan"
                >品牌链接</a
              >
              <a href="" class="capitalize text-grayishViolet hover:text-cyan"
                >分析</a
              >
            </div>
          </div>
          <!-- 菜单2 -->
          <div class="flex flex-col items-center w-full md:items-start">
            <div class="mb-5 font-bold text-white capitalize">资源</div>
            <div class="flex flex-col items-center space-y-3 md:items-start">
              <a href="" class="capitalize text-grayishViolet hover:text-cyan"
                >博客</a
              >
              <a href="" class="capitalize text-grayishViolet hover:text-cyan"
                >开发者</a
              >
              <a href="" class="capitalize text-grayishViolet hover:text-cyan"
                >支持</a
              >
            </div>
          </div>
          <!-- 菜单3 -->
          <div class="flex flex-col items-center w-full md:items-start">
            <div class="mb-5 font-bold text-white capitalize">公司</div>
            <div class="flex flex-col items-center space-y-3 md:items-start">
              <a href="" class="capitalize text-grayishViolet hover:text-cyan"
                >关于</a
              >
              <a href="" class="capitalize text-grayishViolet hover:text-cyan"
                >团队</a
              >
              <a href="" class="capitalize text-grayishViolet hover:text-cyan"
                >工作机会</a
              >
              <a href="" class="capitalize text-grayishViolet hover:text-cyan"
                >联系</a
              >
            </div>
          </div>
        </div>
        <!-- 社交图标 -->
        <div class="flex space-x-6">
          <a href="">
            <img src="/images/icon-facebook.svg" alt="" class="ficon" />
          </a>
          <a href="">
            <img src="/images/icon-twitter.svg" alt="" class="ficon" />
          </a>
          <a href="">
            <img src="/images/icon-pinterest.svg" alt="" class="ficon" />
          </a>
          <a href="">
            <img src="/images/icon-instagram.svg" alt="" class="ficon" />
          </a>
        </div>
      </div>
    </footer>
    <script type="module" src="/main.js"></script>
  </body>
</html>
